<!DOCTYPE html>
<html lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">

    <!--[if lt IE 9]>
        <style>body {display: none; background: none !important} </style>
        <meta http-equiv="Refresh" Content="0; url=//outdatedbrowser.com/" />
    <![endif]-->

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="author" content="az22c 博客">

<script data-no-instant><!-- 移动端不需要的样式不加载 -->
		function includeLinkStyle(url) {
			var link = document.createElement("link");
			link.rel = "stylesheet";
			link.type = "text/css";
			link.href = url;
			var attr = document.createAttribute('data-no-instant');
			link.setAttributeNode(attr);
			document.getElementsByTagName("head")[0].appendChild(link);
		}

		function includeJavaScript(url){
			var scriptObj = document.createElement("script");
			scriptObj.src = url;
			scriptObj.type = "text/javascript";
			var attr = document.createAttribute('data-no-instant');
			scriptObj.setAttributeNode(attr);
			document.getElementsByTagName("head")[0].appendChild(scriptObj);
		}

		if(!navigator.userAgent.match(/(iPhone|iPod|Android|ios|Opera Mini|BlackBerry|webOS)/i)){
			includeLinkStyle("/plugins/css/special.css");
		//	includeLinkStyle("/plugins/font/style3.css");

		//	includeLinkStyle("/plugins/heart/style.css");
		//	includeLinkStyle("/search/css/cb-search.css");
			
				var link = document.createElement("link");
				link.rel = "shortcut icon";
				link.href = "/img/favicon.ico";
				document.getElementsByTagName("head")[0].appendChild(link);
			
		} else {
			if(navigator.userAgent.match(/(iPhone|iPod|iPad|ios)/i)){
				var link = document.createElement("link");
				link.rel = "apple-touch-icon";
				link.href = "/img/favicon.ico";
				document.getElementsByTagName("head")[0].appendChild(link);
			}
			includeLinkStyle("/plugins/prettify/themes/space-gray-dark.css");
			includeLinkStyle("/search/css/cb-search-mobile.css");
		}

		function loadJS(url, callback){
			var scriptObj = document.createElement("script");
			scriptObj.src = url;
			scriptObj.type = "text/javascript";
			//var attr = document.createAttribute('data-no-instant');
			//scriptObj.setAttributeNode(attr);
			var loaded;
			if(typeof callback === 'function'){
	        scriptObj.onload = scriptObj.onreadystatechange = function(){
	            if(!loaded && (!scriptObj.readyState || /loaded|complete/.test(scriptObj.readyState))){
	                scriptObj.onload = scriptObj.onreadystatechange = null;
	                loaded = true;
	                callback();
	            }
	        }
	    }
			document.getElementsByTagName("head")[0].appendChild(scriptObj);
		}
</script>



<meta name="description" content="完成了百度IFE2015的 task3 ，实现了一个 ToDo 的单页应用，功能颇为强大。 使用 localStorage 存储数据，JSON 模拟数据表，实现了分类和待办状态的改变，具有良好的交互体验。 旧项目地址：https://github.com/AlexZhong22c/ToDoApp-IFE2015 新增了 升级版 修复了一些bug，并且适配移动端：https://github.com">
<meta name="keywords" content="App,caller,优化">
<meta property="og:type" content="article">
<meta property="og:title" content="ToDo小应用完工总结">
<meta property="og:url" content="https://blog.az22c.top/2017/02/17/todo-app/index.html">
<meta property="og:site_name" content="Web前端 | Alex Zhong">
<meta property="og:description" content="完成了百度IFE2015的 task3 ，实现了一个 ToDo 的单页应用，功能颇为强大。 使用 localStorage 存储数据，JSON 模拟数据表，实现了分类和待办状态的改变，具有良好的交互体验。 旧项目地址：https://github.com/AlexZhong22c/ToDoApp-IFE2015 新增了 升级版 修复了一些bug，并且适配移动端：https://github.com">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://cloud.az22c.top/caller%E7%9A%84%E7%BB%8F%E5%85%B8%E7%94%A8%E6%B3%95.png-az22cgithub">
<meta property="og:updated_time" content="2024-05-10T10:41:00.270Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="ToDo小应用完工总结">
<meta name="twitter:description" content="完成了百度IFE2015的 task3 ，实现了一个 ToDo 的单页应用，功能颇为强大。 使用 localStorage 存储数据，JSON 模拟数据表，实现了分类和待办状态的改变，具有良好的交互体验。 旧项目地址：https://github.com/AlexZhong22c/ToDoApp-IFE2015 新增了 升级版 修复了一些bug，并且适配移动端：https://github.com">
<meta name="twitter:image" content="https://cloud.az22c.top/caller%E7%9A%84%E7%BB%8F%E5%85%B8%E7%94%A8%E6%B3%95.png-az22cgithub">


    <link rel="alternate" href="/atom.xml" title="Web前端 | Alex Zhong" type="application/atom+xml" data-no-instant>







	<script data-no-instant>
		paceOptions = {
			ajax: false, // disabled
			document: false, // disabled
			eventLag: false, // disabled
			restartOnRequestAfter: false,
			restartOnPushState: false,
			elements: {
				selectors: ['.body-wrap']
			}
		};
	</script>
  <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js" data-no-instant></script>
  <link href="//cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-bounce.css" rel="stylesheet" data-no-instant>


<link rel="stylesheet" href="/css/style.css">



<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">


<title>ToDo小应用完工总结 | Web前端 | Alex Zhong</title>



<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<script data-no-instant>
    var yiliaConfig = {
        fancybox: false,
        animate: false,
        isHome: false,
        isPost: true,
        isArchive: false,
        isTag: false,
        isCategory: false,
        fancybox_js: "//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js",
        scrollreveal: "//cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js",
        search: true
    }
</script>


    <script data-no-instant> yiliaConfig.jquery_ui = [false]; </script>



    <script data-no-instant> yiliaConfig.rootUrl = "\/";</script>







	<!-- 右下角搜索 -->
<script><!-- 移动端不需要的样式不加载 -->
		if(!navigator.userAgent.match(/(iPhone|iPod|Android|ios|Opera Mini|BlackBerry|webOS)/i)){
			document.write("<script src='/search/js/bootstrap3-typeahead.min.js' data-no-instant><\/script>");
		} else {
			document.write("<script src='/search/js/bootstrap3-typeahead.min-mobile.js' data-no-instant><\/script>");
		}
</script>

	<!-- <script src="/search/js/cb-search.js"></script> 已合并到after-footer.ejs-->
	<!-- <script src="/plugins/js/jquery.lazyload.min.js"></script> -->
	<script src="//cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js" data-no-instant></script>
	<!--  -->
		<!--prettify代码高亮主题css引入。注：为了减少请求数，已将此css合并到special.css-->
		<!--<link href="/plugins/prettify/themes/space-gray-dark.css" rel="stylesheet">-->
	<!--  -->

	<script type="text/javascript">
        //定义一个全局script的标记数组，用来标记是否某个script已经下载到本地
        var scriptsArray = new Array();
        $.cachedScript = function (url, options) {
            //循环script标记数组
            for (var s in scriptsArray) {
                //console.log(scriptsArray[s]);
                //如果某个数组已经下载到了本地
                if (scriptsArray[s]==url) {

                    return {  //则返回一个对象字面量，其中的done之所以叫做done是为了与下面$.ajax中的done相对应
                        done: function (method) {
                            if (typeof method == 'function'){  //如果传入参数为一个方法
                                method();
                            }
                        }
                    };
                }
            }
            //这里是jquery官方提供类似getScript实现的方法，也就是说getScript其实也就是对ajax方法的一个拓展
            options = $.extend(options || {}, {
                dataType: "script",
                url: url,
                cache:true //其实现在这缓存加与不加没多大区别
            });
            scriptsArray.push(url); //将url地址放入script标记数组中
            return $.ajax(options);
        };
    </script>
</head>
</html>
<body>
  <div id="container">
    <div class="left-col" id="left_col_div" style="background-color:#fafafa;">
    <div class="overlay" id="id_code_rain_div" style="opacity:0.2">
    <canvas id="matrix" width="300" height="180"></canvas>
</div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a id="id_avatar_a" href="/" class="profilepic">
            <!-- <img src="/img/avatar.jpg" class="animated zoomIn"> -->
        </a>
        <hgroup id="id_hgroup_name">
        <h1 id="ngudream_name" class="header-author"><!-- main.styl cl-effect-2 -->
        <a href="/"><span style="background-color:#fafafa !important" data-hover="专注于Web前端">az22c 博客</span></a>
        </h1>
        </hgroup>
        
        
        <form id="search-form">
            <!-- 搜索框相关 -->
            <div class="col-3" style="float:left">
                <input type="text" id="local-search-input" name="q" results="0" placeholder="搜索...(◕ܫ◕)" class="effect-2" autocomplete="off" autocorrect="off" style="padding-left:4px" />
                <span class="focus-border"></span>
                <!-- 搜索框动画 -->
            </div>
            <div style="float:right;margin-top:13px;">
                <i id="search-delete" class="button pill" onclick="resetSearch()" style="margin-left:-26px;">删除</i>
                <!-- 清空/重置搜索框 -->
            </div>
        </form>
        <br/>
        <br/>
        <div id="local-search-result"></div>
        <!-- 搜索结果区 -->
        <p class="no-result" style="font-size:0.8em;text-align:center;">没有找到，空空如也...</p>
        <!-- 无匹配时显示，注意请在 CSS 中设置默认隐藏 <i class='fa fa-spinner fa-pulse'></i>-->
        
        
        <div id="switch-btn" class="switch-btn">
            <div class="icon">
                <div class="icon-ctn">
                    <div class="icon-wrap icon-house" data-idx="0">
                        <div class="birdhouse"></div>
                        <div class="birdhouse_holes"></div>
                    </div>
                    <div class="icon-wrap icon-ribbon hide" data-idx="1">
                        <div class="ribbon"></div>
                    </div>
                    
                    
                    
                    
                    <div class="icon-wrap icon-me hide" data-idx="5">
                        <div class="user"></div>
                        <div class="wechat_left"></div>
                    </div>
                    <div class="icon-wrap icon-me hide" data-idx="6">
                        <div class="user"></div>
                        <div class="wechat_left"></div>
                    </div>
                    
                </div>
            </div>
            <div class="tips-box hide">
                <!-- 鸟屋 -->
                <div class="tips-arrow"></div>
                <ul class="tips-inner">
                    <li>
                        菜单
                    </li>
                    <li>
                        标签
                    </li>
                    
                    
                    
                </ul>
            </div>
        </div>
        
        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul id="menu_ul">
                            
                            <!-- 菜单 -->
                            <li class="cl-effect-1">
                                
                                <a href="/">
                                    主页
                                </a>
                                
                            </li>
                            
                            <!-- 菜单 -->
                            <li class="cl-effect-1">
                                
                                <a href="/archives/">
                                    归档
                                </a>
                                
                            </li>
                            
                            <!-- 菜单 -->
                            <li class="cl-effect-1">
                                
                                <a data-no-instant href="/tags/">
                                    分类标签
                                </a>
                                
                            </li>
                            
                            <!-- 菜单 -->
                            <li class="cl-effect-1">
                                
                                <a href="/tags/回顾">
                                    助记回顾
                                </a>
                                
                            </li>
                            
                            <!-- 菜单 -->
                            <li class="cl-effect-1">
                                
                                <a href="/about/">
                                    关于我
                                </a>
                                
                            </li>
                            
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            <!-- 社交 -->
                            
                            
                            <span class="hint  hint--top" data-hint="QQ"><a class="fa QQ" href="javascript:void(0)" style="margin-left:3px;"></a></span>
                            
                            
                        </ul>
                    </nav>
                </section>
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/App/">App</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/BFC/">BFC</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS选择器/">CSS选择器</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Cookie/">Cookie</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/">ES6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/H5/">H5</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/IFE/">IFE</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/IIFE/">IIFE</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/MongoDB/">MongoDB</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bug/">bug</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/caller/">caller</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/express/">express</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/font-face/">font-face</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/font-size/">font-size</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/line-height/">line-height</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/link标签/">link标签</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/list-style/">list-style</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/margin/">margin</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/meta标签/">meta标签</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/new/">new</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/radius/">radius</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/shu/">shu</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/theme/">theme</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/this/">this</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vertical-align/">vertical-align</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vuex/">vuex</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/yelee/">yelee</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/事件/">事件</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/交互/">交互</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/任务队列/">任务队列</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/优先级/">优先级</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/优化/">优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/伪元素/">伪元素</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/作用域/">作用域</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/全选/">全选</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/函数属性/">函数属性</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/函数式编程/">函数式编程</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/单例/">单例</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/原型系统/">原型系统</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/原理/">原理</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/双飞翼布局/">双飞翼布局</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/回顾/">回顾</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/图标/">图标</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/圣杯布局/">圣杯布局</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/基础/">基础</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/复选框/">复选框</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/字体/">字体</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/对象属性/">对象属性</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/居中/">居中</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/异步/">异步</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能优化/">性能优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/指令/">指令</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/指针事件/">指针事件</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/插件/">插件</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/操作符/">操作符</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/文字/">文字</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/时间/">时间</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/权重/">权重</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/条目/">条目</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/树形/">树形</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/清除浮动/">清除浮动</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/源码/">源码</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/特殊/">特殊</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/笔记副本/">笔记副本</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/表格/">表格</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/触摸事件/">触摸事件</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/跨tab/">跨tab</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/跨域/">跨域</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/跨站/">跨站</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/边框/">边框</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/进阶/">进阶</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/闭包/">闭包</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/随笔/">随笔</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面向对象/">面向对象</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面试题/">面试题</a></li></ul>
                    </div>
                </section>
                
                
                
                    
                    
                    <section class="switch-part switch-part6">
                        <div style="text-align:center;" id="qq_div">
                        </div>
                    </section>
                    <section class="switch-part switch-part7" id="wechat_div">
                        <div style="text-align:center;"></div>
                    </section>
                    
                </div>
            </div>
        </header>
    </div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="回到主页">az22c 博客</a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <!-- <a id="id_avatar_a_mobile" href="/" class="profilepic"> -->
                <!-- <img src="/img/avatar.jpg" class="animated rotateIn" style="-vendor-animation-duration: 3s;-vendor-animation-delay: 2s;-vendor-animation-iteration-count: infinite;"> -->
				<!--<img src="/img/avatar.jpg" > -->
            <!-- </a> -->
            <hgroup>
              <h1 class="header-author"><a href="/" title="回到主页">az22c 博客</a></h1>
            </hgroup>
            
            <p class="header-subtitle">Coding Changes the World</p>
            
            <nav class="header-menu">
                <ul>
                
                    <li><a href="/">主页</a></li>
                
                    <li><a href="/archives/">归档</a></li>
                
                    <li><a href="/tags/">分类标签</a></li>
                
                    <li><a href="/tags/回顾">助记回顾</a></li>
                
                    <li><a href="/about/">关于我</a></li>
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                        <ul class="social">
                            
								
									<a class="fa QQ" title="QQ" target="_self" href="/social/"></a>
								
                            
                        </ul>
            </nav>
        </header>
    </div>
    <link class="menu-list" tags="标签" friends="友情链接" about="个人签名"/>
</nav>

      <div class="body-wrap"><article id="post-todo-app" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2017/02/17/todo-app/" class="article-date">
      <time datetime="2017-02-17T14:44:31.000Z" itemprop="datePublished">2017-02-17</time>
</a>




	<br />
	<p style="height:7px;"/>
	<p style="height:20px;font-family:KaiTi,LiSu,'宋体',sans-serif;color:#DBDBDB;font-size:12px;">预计阅读8分钟</p>

    </div>
  

   <!-- 文章主内容 -->
  
      <header id="id_header_post" class="article-header">
        
  
    <h1 class="article-title-big" itemprop="name">
      ToDo小应用完工总结
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        
    <div class="article-category tagcloud">
    <a class="article-category-link" href="/categories/项目总结/">项目总结</a>
    </div>


        
    <div class="article-tag tagcloud">
        <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/App/">App</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/caller/">caller</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/优化/">优化</a></li></ul>
    </div>


        <div class="clearfix"></div>
      </div>
      
    
          <div id="article-content" class="article-entry" itemprop="articleBody">
			  
			<p>完成了百度IFE2015的 <a href="https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0003" target="_blank" rel="noopener">task3</a> ，实现了一个 ToDo 的单页应用，功能颇为强大。</p>
<p>使用 localStorage 存储数据，JSON 模拟数据表，实现了分类和待办状态的改变，具有良好的交互体验。</p>
<p>旧项目地址：<a href="https://github.com/AlexZhong22c/ToDoApp-IFE2015" target="_blank" rel="noopener">https://github.com/AlexZhong22c/ToDoApp-IFE2015</a></p>
<p>新增了 <a href="https://to-do-web-app.az22c.vercel.app/" target="_blank" rel="noopener">升级版</a> 修复了一些bug，并且适配移动端：<a href="https://github.com/AlexZhong22c/ToDo-WebApp" target="_blank" rel="noopener">https://github.com/AlexZhong22c/ToDo-WebApp</a></p>
<a id="more"></a>
<h2 id="知识收获"><a class="header-anchor" href="#知识收获"></a>知识收获</h2>
<h3 id="自适应高度布局"><a class="header-anchor" href="#自适应高度布局"></a>自适应高度布局</h3>
<p>分为上中下三栏，中间的一栏自适应浏览器高度。这是参考了横向的三栏布局来写的。</p>
<ul>
<li>中间一栏要在外面包一层div，如果外面本来就有一层div这种布局就非常合适。上栏和下栏用绝对定位即可。</li>
<li>外面的这层div使用大面积的padding</li>
</ul>
<h3 id="在javascript-中创建html元素-用createelement-还是innerhtml好一点？"><a class="header-anchor" href="#在javascript-中创建html元素-用createelement-还是innerhtml好一点？"></a>在JavaScript 中创建HTML元素，用createElement()还是innerHTML好一点？</h3>
<ul>
<li>最叼的好像是 使用<a href="https://github.com/xwcoder/template" target="_blank" rel="noopener">模板技术</a>，其实我的静态博客用的就是这种。</li>
<li>在用js代码的循环创建元素的时候就顺便一个个绑定好事件这是一种比较简单的思路，这样就不用给每个元素增加id或者class了。这时候用createElement来创建元素就比较方便绑定事件，而如果用innerHTML来创建元素的话肯定不能在形成元素的循环里面给元素绑定事件了，这样太硬编码了。</li>
</ul>
<blockquote>
<p>《高性能JavaScript》：</p>
<ul>
<li>如果在对性能有苛刻要求更新一大段的HTML，innerHTML在大多数浏览器中执行更快。在旧版本浏览器中innerHTML方法更快，在基于Webkit内核却相反。</li>
<li>对于大多数日常操作而言，差异不大，根据代码可读性、可维护性、团队习惯、代码风格来决定采用哪种方法。</li>
<li>某答主说：**他一般大段就使用innerHTML了，而用dom创建单个元素或少量元素。 **</li>
<li>或者DOM结构嵌套的级数比较多的就用innerHTML</li>
<li>如果要使用createElement()，强烈推荐一下createDocumentFragment()
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment" target="_blank" rel="noopener">documentFragment</a> 被所有主流浏览器支持，甚至是IE 6。所以，没有理由不用。</li>
</ul>
</li>
</ul>
</blockquote>
<h3 id="html属性用双引号-使用小写英文"><a class="header-anchor" href="#html属性用双引号-使用小写英文"></a>html属性用双引号、使用小写英文</h3>
<ul>
<li><strong>HTML4标准里没有单引号的对应实体，</strong> 所以单引号里写单引号很麻烦。后来XML规范才加入了’ 并由XHTML 1.0引入HTML。不过考虑到兼容性，前端几乎从来不写。
<ul>
<li>刚才在单引号里面写单引号只能用实体不能用反斜杠转移字符，根据HTML标准，反斜杠是不行的。</li>
</ul>
</li>
<li><strong>而JS中字符串用单引号，其实可能是HTML属性用双引号的结果。</strong></li>
<li>另外，一般大家惯用的做法是 HTML 用双引号，JS 用单引号的原因是，这样在 JS 中拼 HTML 片段不用转义：
<ul>
<li><code>elem.innerHTML = '&lt;div class=&quot;post&quot;&gt;&lt;/div&gt;';</code></li>
<li>当然你要反过来也可以，但不是主流做法。</li>
</ul>
</li>
<li>HTML属性不仅仅只有URL，另外引号出现在URL也是合法的。</li>
<li>根据W3Cschool的说法，<strong>要求属性和属性值使用小写，属性值应该始终被包括在引号内。</strong>
<ul>
<li>用innerHTML来创建taskid=1和cateid=0这种属性好像没有用啊，因为浏览器自动解析成：taskid=&quot;1&quot;和cateid=“0”</li>
</ul>
</li>
</ul>
<h3 id="ul里面能放除了li的其他标签吗？"><a class="header-anchor" href="#ul里面能放除了li的其他标签吗？"></a>ul里面能放除了li的其他标签吗？</h3>
<p>不能，<code>&lt;ul&gt;</code>里面只能放<code>&lt;li&gt;</code>。但是<code>&lt;li&gt;</code>里面可以放<code>&lt;hx&gt;</code>,<code>&lt;p&gt;</code>等标签。</p>
<p>ul里面放其他标签，不光不符合语义，在IE7- 里面也会有问题：</p>
<p>如果<code>&lt;other&gt;</code>标签前面有<code>&lt;li&gt;</code>标签，浏览器会认为<code>&lt;other&gt;</code>为<code>&lt;li&gt;</code>的子节点。</p>
<h3 id="box-shadow"><a class="header-anchor" href="#box-shadow"></a>box-shadow</h3>
<p>是CSS3里面的属性。只要shadow不占太多px的地方，用一下还是非常好的</p>
<h3 id="jquery"><a class="header-anchor" href="#jquery"></a>JQuery</h3>
<ul>
<li>JQuery的<code>not()</code>方法非常好用，<code>each()</code>也非常好</li>
</ul>
<ul>
<li>在绑定事件 函数中的 JQuery选择器 在函数触发后才会去选择对象</li>
<li>像这个App中分类列表的单击交互，如果想要只有被单击选择的HTML元素有 高亮，那么在绑定单击事件来响应单击选择的时候，记得先清除所有同类HTML元素的 高亮</li>
</ul>
<h4 id="jquery中-this-和-this-有区别："><a class="header-anchor" href="#jquery中-this-和-this-有区别："></a>JQuery中 this 和 $(“this”)有区别：</h4>
<p><a href="http://www.jb51.net/article/57376.htm" target="_blank" rel="noopener">JQuery中 this 和 $(“this”)有区别</a></p>
<p>如果你要使用html元素本身的属性或方法就需要使用this,如果你要使用jQuery包装后的方法或属性就要$(this),一般则有如下的关系.</p>
<pre><code>$(this)[0] == this;
</code></pre>
<p>上文的代码是要使用this的地方是要调用表单form的有reset方法,而这一方法jQuery没有包装支持,所以才有this.reset(),也可以使用$(this)[0].reset();</p>
<hr>
<p>关于什么时候使用二者?可以看如下例子:</p>
<pre><code>$('a').click(function(){
        this.innerHTML==$(this).html()=='jQuery';//三者是一样的.
        this.getAttribute('href')==this.href==$(this).attr('href')//三者是一样的;
        this.getAttribute('target')==this.target==$(this).attr('target')//三者是一样的;
        this.getAttribute('data-id')==$(this).attr('data-id')//二者是一样的;
    });
</code></pre>
<h3 id="caller的经典用法"><a class="header-anchor" href="#caller的经典用法"></a>caller的经典用法</h3>
<p>注：<strong>该特性是非标准的，请尽量不要在生产环境中使用它！</strong></p>
<p><img src="https://cloud.az22c.top/caller%E7%9A%84%E7%BB%8F%E5%85%B8%E7%94%A8%E6%B3%95.png-az22cgithub" alt></p>
<h2 id="精益求精"><a class="header-anchor" href="#精益求精"></a>精益求精</h2>
<h3 id="html-css"><a class="header-anchor" href="#html-css"></a>HTML+CSS</h3>
<ul>
<li><a href="http://blog.bingo929.com/CSS-coding-semantic-naming.html" target="_blank" rel="noopener">CSS命名惯例语义化</a></li>
<li>把需要的li全都设成了<code>cursor:pointer</code></li>
<li>虽然DOM结构是由js代码渲染的，在HTML留下一些<strong>template</strong>方便参考和编写代码</li>
<li>将颜色抽象成单独的class，方便更换颜色：</li>
</ul>
<pre><code>.white-bg {background: #FFFFCC;}
.black-bg {background: #3F3A39;}
.green-bg {background: #CFE8CC;}
.blue-bg {background: #5D6684;}
.grey-bg {background: #E9E9E9;}
.lt-blue-bg {background: #DADADA;}
</code></pre>
<p>我认为，只有占<strong>大块区域</strong>的元素才用色彩的class来设置<strong>背景颜色</strong>。因为如果要上色的元素很多的话，或者元素会短时间内存在再消失的话，一个一个加class就很麻烦。</p>
<h3 id="javascript"><a class="header-anchor" href="#javascript"></a>JavaScript</h3>
<ul>
<li>优化了 JavaScript 函数的命名，使得风格统一，语义明确。
<ul>
<li>这个App里面，用来控制视图层的函数最好用refresh来命名，用update命名的函数用于更新数据库的信息</li>
</ul>
</li>
</ul>
<ul>
<li>一般留下数组index为0的位置来存放一些默认的数组元素。比如存储“分类”的数组就将“默认分类”设为是它的0号元素。</li>
<li>深刻感受到使用主键等等概念管理数据库的简便</li>
<li>如果是 JavaScript 对象字面量，键值对的 键 最好不要用&quot;“包着，转成JSON的时候 键 会自动被”&quot;包上</li>
<li><strong>util.js</strong>是基于前面的小任务写的，它的功能很薄弱。例如<code>$(#modal-foot button)</code>返回来的只是一个元素对象，不合理，所以为了省事我直接用JQuery库就好了。</li>
</ul>
<h3 id="改进代码"><a class="header-anchor" href="#改进代码"></a>改进代码</h3>
<pre><code>function queryCateById(id) {
    var allCates = queryAllCates();
    var result = null;
    for (var i = 0; i &lt; allCates.length; i++) {
        if (allCates[i].id == id) {
            result = allCates[i];
            break;
        }
    }
    return result;
}
</code></pre>
<p>简化为：</p>
<pre><code>function queryCateById(id) {
    var allCates = queryAllCates();
    for (var i = 0; i &lt; allCates.length; i++) {
        if (allCates[i].id == id) {
            return allCates[i];
        }
    }
}
</code></pre>
<h3 id="容易犯的错误"><a class="header-anchor" href="#容易犯的错误"></a>容易犯的错误</h3>
<ul>
<li>JQuery中使用id选择器返回的也是<strong>元素数组</strong>。</li>
</ul>
<pre><code>console.log($(&quot;#modal-foot&quot;))// 元素数组
console.log($(&quot;#modal-foot&quot;)[0])// 这才是想要的元素
</code></pre>
<ul>
<li>HTML会自动忽略空格，要空格请用<code>&amp;nbsp;</code></li>
</ul>
<hr>
<p>在JQuery中，$(selector)[0]中的[0]会将JQuery对象转化为JavaScript对象。所以onclick有两种写法：</p>
<pre><code>$(&quot;#modal-foot button.cancel&quot;)[0].onclick = function() {
	// ```
}; 
///////分割线
$(&quot;#modal-foot button.cancel&quot;).click(function() {
	$(&quot;.cover&quot;).hide();
}); 
// $(selector).click(function() {});
</code></pre>
<p>另外还有一个例子可以看一下：</p>
<pre><code>$(&quot;.cover&quot;).show();
$(&quot;.cover&quot;).css(&quot;display&quot;,&quot;block&quot;);
$(&quot;.cover&quot;)[0].style.display = &quot;block&quot;;
</code></pre>
<h3 id="优化命名"><a class="header-anchor" href="#优化命名"></a>优化命名</h3>
<p><strong>函数名</strong>中包含&quot;all&quot;还是挺有用的，但是<strong>函数中的变量名</strong>包含&quot;all&quot;就没什么作用，如果是数组用&quot;arr&quot;命名就可以了。</p>
<p>比如：</p>
<pre><code>// 函数名中包含all，比较容易与其他类似的函数区分
function queryAllCates() {
    return JSON.parse(localStorage.cate);
}
</code></pre>
<p>再比如：</p>
<pre><code>function queryCateById(id) {
    var allCates = JSON.parse(localStorage.cate);
    for (var i = 0; i &lt; allCates.length; i++) {
        if (allCates[i].id == id) {
            return allCates[i];
        }
    }
}
// 函数内变量名带all好像也没什么用。allCates还不如直接叫cates或者叫catesArr
</code></pre>
<p>但是：</p>
<p>如果用addNewTask作为函数名，肯定不够用addTask作为函数名好。</p>
<h2 id="发现的bug-找时间再fix"><a class="header-anchor" href="#发现的bug-找时间再fix"></a>发现的bug，找时间再fix</h2>
<ol>
<li>火狐浏览器不实现<code>&lt;input type=&quot;date&quot;&gt;</code></li>
</ol>
<h2 id="最后："><a class="header-anchor" href="#最后："></a>最后：</h2>
<blockquote>
<p><a href="https://github.com/AlexZhong22c/color-design-22c" target="_blank" rel="noopener">color design</a>：<a href="https://github.com/AlexZhong22c/color-design-22c" target="_blank" rel="noopener">https://github.com/AlexZhong22c/color-design-22c</a></p>
<p>如果各位看官喜欢的话留一个Star吧！</p>
</blockquote>

		</div>
      
  
     <!-- 版权署名授权 -->
    <div class="copyright">
        <p><span>本文标题:</span><a href="/2017/02/17/todo-app/">ToDo小应用完工总结</a></p>
        <p><span>文章作者:</span><a id="copyright_author" href="/" class="hint  hint--right" data-hint="回到主页">az22c 博客</a></p>
        <p style="color: #696969;"><span>发布时间:</span>2017-02-17, 22:44:31</p>
        <!-- <p><span>最后更新:</span>2024-05-10, 18:41:00</p> -->
        <p>
            <span>原始链接:</span><a id="copyright_url" class="post-url hint  hint--top" data-hint="ToDo小应用完工总结" href="/2017/02/17/todo-app/">https://blog.az22c.top/2017/02/17/todo-app/</a>
            <span class="copy-path hint  hint--right" data-clipboard-text="原文: https://blog.az22c.top/2017/02/17/todo-app/　　作者: az22c 博客" data-hint="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
        </p>
        <p style="color: #696969;">
            <span>许可协议:</span><i class="fa fa-creative-commons"></i><a id="copyright_license" rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" target = "_blank" class="hint  hint--bottom" data-hint="中国大陆 (CC BY-NC-SA 3.0 CN)">"署名-非商用-相同方式共享 3.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>



    <nav id="article-nav">
        
            <div id="article-nav-newer" class="article-nav-title">
                <a href="/2017/02/22/my-hexo-theme/">
                    yelee主题改bug总结
                </a>
            </div>
        
        
            <div id="article-nav-older" class="article-nav-title">
                <a href="/2017/02/11/equality-operators/">
                    相等操作符回顾
                </a>
            </div>
        
    </nav>


  
</article>

    <div id="toc" class="toc-article">
        <strong class="toc-title">文章目录</strong>
        
            <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#知识收获"><span class="toc-text">知识收获</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#自适应高度布局"><span class="toc-text">自适应高度布局</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#在javascript-中创建html元素-用createelement-还是innerhtml好一点？"><span class="toc-text">在JavaScript 中创建HTML元素，用createElement()还是innerHTML好一点？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html属性用双引号-使用小写英文"><span class="toc-text">html属性用双引号、使用小写英文</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ul里面能放除了li的其他标签吗？"><span class="toc-text">ul里面能放除了li的其他标签吗？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#box-shadow"><span class="toc-text">box-shadow</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#jquery"><span class="toc-text">JQuery</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#jquery中-this-和-this-有区别："><span class="toc-text">JQuery中 this 和 $(“this”)有区别：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#caller的经典用法"><span class="toc-text">caller的经典用法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#精益求精"><span class="toc-text">精益求精</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#html-css"><span class="toc-text">HTML+CSS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript"><span class="toc-text">JavaScript</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#改进代码"><span class="toc-text">改进代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#容易犯的错误"><span class="toc-text">容易犯的错误</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#优化命名"><span class="toc-text">优化命名</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#发现的bug-找时间再fix"><span class="toc-text">发现的bug，找时间再fix</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#最后："><span class="toc-text">最后：</span></a></li></ol>
        
    </div>
    <style>
        .left-col .switch-btn,
        .left-col .switch-area {
            display: none;
        }
        .toc-level-3 i,
        .toc-level-3 ol {
            display: none !important;
        }
    </style>
    <input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录">
    <script>
        yiliaConfig.toc = ["隐藏目录", "显示目录", !!"false"];
    </script>






    




    <div class="scroll" id="post-nav-button">
        
            <a href="/2017/02/22/my-hexo-theme/" title="上一篇: yelee主题改bug总结">
                <i class="fa fa-angle-left"></i>
            </a>
        

        <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>

        
            <a href="/2017/02/11/equality-operators/" title="下一篇: 相等操作符回顾">
                <i class="fa fa-angle-right"></i>
            </a>
        
    </div>

    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2022/05/22/admin-tree-widget/">后管常见的树形组件的vue实现</a></li><li class="post-list-item"><a class="post-list-link" href="/2022/05/22/admin-custom-tree-table/">一种常见的多层级树形表格组件</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-summary/">Vue2源码【9】收获总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-66-directive/">Vue2源码【8-6】指令</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-65-keep-alive/">Vue2源码【8-5】keep-alive</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-64-slot/">Vue2源码【8-4】slot和slotScope</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-62-v-model/">Vue2源码【8-2】v-model</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-61-event/">Vue2源码【8-1】event</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-5-proxy/">Vue2源码【7】数据劫持使用Proxy的优势</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-4-data-proxy/">Vue2源码【6】数据代理</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-3-next-tick/">Vue2源码【5】异步更新和nextTick的原理</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-24-whether-responsive/">【4-6】响应式原理 之 哪些api是响应式的，哪些不是响应式的</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-23-props/">【4-5】响应式原理 之 props 是响应式的证明</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-222-computed-n-watch/">【4-4】【附录】响应式原理 之 数据劫持之computed和watch的具体源码</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-221-deepin-observe/">【4-3】响应式原理 之 数据劫持之observe的细节</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-220-data-hijack/">【4-2】响应式原理 之 数据劫持</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-21-observe-mode/">【4-1】响应式原理 之 观察者模式</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-12-patch/">Vue2源码【3】patch的原理</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-11-mvvm/">Vue2源码【2】Vue MVVM 的工作流程</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/04/vue2-src-code-00-data-drive/">Vue2源码【1】Vue 的整体架构</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/02/vue-router3-src-code-6-component/">Vue-Router3源码拾遗【6】配套组件的实现</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/02/vue-router3-src-code-5-api-n-url/">Vue-Router3源码拾遗【5】改变url</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/02/vue-router3-src-code-4-switch-n-guard/">【4运作核心】路径切换和路由守卫</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/02/vue-router3-src-code-3-matcher/">Vue-Router3源码拾遗【3】matcher匹配器</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/02/vue-router3-src-code-2-instance/">【2】路由注册和VueRouter实例</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/09/02/vue-router3-src-code-1-overview/">Vue-Router3源码拾遗【1】概述</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/05/22/cross-origin-cross-tab/">03-跨域通信和跨tab通信</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/05/22/cross-origin-cross-site-cookie/">02-第三方cookie(注：将被禁用)</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/05/22/cross-origin-cross-site/">01-跨域和跨站的基本概念</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/04/02/settimeout-0-to-9/">面试题：改造代码，使之隔秒输出0 - 9</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/04/02/vue-lazyload-summary/">Vue-lazyload 原理和使用 个人总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2019/02/06/height-calculate/">深入理解文字高度和行高的设置</a></li><li class="post-list-item"><a class="post-list-link" href="/2019/02/05/vertical-align-middle/">vertical-align:middle近似居中和完美居中</a></li><li class="post-list-item"><a class="post-list-link" href="/2019/02/05/centralize-one-ele/">总结：使单一对象水平/垂直居中</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/02/05/js-functional-intro/">到底什么是函数式编程 精简总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/02/04/performance-optimized-summary/">Web前端性能优化概述</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/10/12/git-stage/">git暂存区知识梳理</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/09/17/ife-css-task03/">三栏式布局--IFE2017-CSS-task03笔记</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/09/07/css-border1/">border-radius属性</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/09/03/js-obj-prop1/">对象属性的操作</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/09/02/js-obj-prop2/">对象属性描述符</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/09/01/js-obj-prop3/">对象属性之对象状态</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/12/js-inherit/">es5实现继承的6种方式</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/12/js-new-happen/">new创建对象的过程发生了什么</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/09/js-prototype-practice/">原型对象 实战使用</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/08/js-proto/">理解prototype、__proto__和constructor等关系</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/07/js-this2/">this绑定的优先级</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/07/js-this/">结合this的4种绑定规则 深入理解this指向的判定</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/07/02/js-event4/">浏览器事件冒泡或者捕获相关</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/07/01/js-event3/">js四种事件处理程序</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/07/01/js-pv-default/">考古：js取消默认事件行为</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/05/08/let-n-const/">let和const变量声明的特点</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/05/07/js-date/">JavaScript Date对象回顾</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/05/07/vue-checkbox-table/">纯vue实现checkbox父子联动</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/04/25/vue-time-tracker/">经典vue单页路由入门全家桶</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/04/15/vue-table-nav/">按条目展示表格数据小插件</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/04/01/clearfix-n-bfc/">闭合浮动</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/04/01/ife-css-task02/">IFE2017-CSS-task02笔记</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/03/31/css-selectors-specificity/">CSS选择器优先级</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/03/28/h5-new-ele/">H5新标签和被H5拥抱的老元素们</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/03/27/ife-css-task01/">IFE2017-CSS-task01笔记</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/03/10/iife-intro/">IIFE回顾</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/03/04/about-margin/">和margin有关的知识</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/02/27/icon-usage/">桌面端和移动端图标的引入</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/02/25/webapp-events-intro/">移动开发事件入门概述</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/02/24/webapp-intro/">移动开发入门概述</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/02/22/my-hexo-theme/">yelee主题改bug总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/02/17/todo-app/">ToDo小应用完工总结</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/02/11/equality-operators/">相等操作符回顾</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/02/11/js-operators/">操作符回顾</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/01/25/font-face/">font-face--CSS3</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/01/13/js-function/">js函数基础回顾</a></li></ul>




    <script>
        
    </script>

</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info" style="text-align:center;">

            <div class="footer-left" style="vertical-align:middle;">
                <img src="" style="vertical-align:middle; opacity:0" height="24">
                <i class="fa fa-copyright" style="vertical-align:middle;"></i>
                2017-2024 az22c 博客
            </div>

			<div id="footer_right_div" class="footer-right" style="text-align:center;overflow:hidden;">
				<div id="web_count_div" class="post-count-bottom" style="display:inline;">
					
						<span id="id_wordcount_span" style="margin-left:20px;vertical-align:middle;">本文字数：2,016</span>
					
				</div>
            </div>
				</div>
				
				<div style="text-align:center;" class="beian">
					<a style="text-decoration: none;" href="http://www.beian.miit.gov.cn/" target="_blank"  rel="nofollow me noopener noreferrer">粤ICP备19013700号-1</a>
				</div>

        
    </div>

	<!-- 右下角的搜索 -->
<div class="cb-search-tool" style="position: fixed; top: 0px ; bottom: 0px; left: 0px; right:  0px;
        opacity: 0.95; background-color: #111111; z-index: 9999; display: none;">
    <input type="text" class="cb-search-content" id="cb-search-content" style="width:50%;top:60px;left:300px;position:fixed; border-radius:50px; background-color:white; opacity:1 !important;" placeholder="请输入文章标题或标签" />

	<div id="cb-close-div" style="position: fixed; top: 16px; right: 16px;">
        <span class="hint  hint--left" data-hint="按ESC键关闭搜索" id="id_span_search_close"></span>
    </div>
</div>

<div id="cb-search-div" style="position: fixed; right: 16px; bottom: 20px;">
    <span class="hint  hint--left" data-hint="双击Ctrl键打开或关闭搜索" id="id_span_search_open"></span>
</div>
</footer>

    </div>
    
<script src="/js/GithubRepoWidget.js"></script>

<script data-main="/js/main.js" src="//cdn.bootcss.com/require.js/2.2.0/require.min.js" defer async="true" data-no-instant></script>






<div class="scroll" id="scroll">
    <a href="#" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
    <!-- <a href="javascript:void(0)" title="评论区已关闭"><i class="fa fa-comments-o"></i></a> -->
    <!-- <a href="#comments" onclick="load$hide();" title="查看评论"><i class="fa fa-comments-o"></i></a> -->
    <a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
</div>
<script>
    // Open in New Window
    
        var oOpenInNew = {
             github: ".github-widget a", 
            
            
            
            
            
             archives: ".archive-article-title", 
             miniArchives: "a.post-list-link", 
            
             friends: "#js-friends a", 
            
        }
        for (var x in oOpenInNew) {
            $(oOpenInNew[x]).attr("target", "_blank");
        }
    
</script>

<script type="text/javascript" data-no-instant>
String.prototype.endWith = function(s) {
if(s==null||s==""||this.length==0||s.length>this.length)
return false;
if(this.substring(this.length-s.length)==s)
return true;
else
return false;
return true;
}
String.prototype.startWith = function(s) {
if(s==null||s==""||this.length==0||s.length>this.length)
return false;
if(this.substr(0,s.length)==s)
return true;
else
return false;
return true;
}
//是否是文章
function is_post(){//根据自己实际需要来判断
var url = window.location.pathname;
var urlArray = url.split("/");
if(urlArray.length > 2){
var id = $(".article").eq(0).attr("id");
var resultUrl = "post-" + urlArray[urlArray.length - 2];
if(resultUrl == id){
return true;
}
}
return false;
// if($("#id_header_post").length > 0){
//   return true;
// }
// return false;
//return yiliaConfig.isPost;
}
function is_archive() {
// if($("#id_archives").length > 0){
//   return true;
// }
// return false;
var url = window.location.pathname;
if(url.startWith("/archives/")){
return true;
}
return false;
//return yiliaConfig.isArchive;
}
function is_tag() {
var url = window.location.pathname;
if(url.startWith("/tags/")){
return true;
}
return false;
}
function is_category(){
var url = window.location.pathname;
if(url.startWith("/categories/")){
return true;
}
return false;
//return yiliaConfig.isCategory;
}
function is_home(){
var url = window.location.pathname;
if(url == '/'){
return true;
}
return false;
}
var slide = function(idx) {
// 修复IE10+切换无效的bug
var $wrap = $(".switch-wrap"),
transform = [
'-webkit-transform: translate(-' + idx * 100 + '%, 0);',
'-moz-transform: translate(-' + idx * 100 + '%, 0);',
'-o-transform: translate(-' + idx * 100 + '%, 0);',
'-ms-transform: translate(-' + idx * 100 + '%, 0);',
'transform: translate(-' + idx * 100 + '%, 0);'
];
$wrap[0].style.cssText = transform.join('');
$(".icon-wrap").addClass("hide");
$(".icon-wrap").eq(idx).removeClass("hide");
}
var toggleTocArea = function(){
var valueHide = yiliaConfig.toc[0];
var valueShow = yiliaConfig.toc[1];
if ($(".left-col").is(":hidden")) {
$("#tocButton").attr("value", valueShow);
}
$("#tocButton").click(function() {
if ($("#toc").is(":hidden")) {
$("#tocButton").attr("value", valueHide);
$("#toc").slideDown(320);
$(".switch-btn, .switch-area").fadeOut(300);
}
else {
$("#tocButton").attr("value", valueShow);
$("#toc").slideUp(350);
$(".switch-btn, .switch-area").fadeIn(500);
}
})
}
var HideTOCifNoHeader = function(){
if (!$(".toc").length) {
$("#toc, #tocButton").hide();
$(".switch-btn, .switch-area").show();
}
}
var clickIcon = function(){
$("#toc .toc-item > i").click(function(){
$(this).siblings(".toc-child").slideToggle(100);
$(this).toggleClass("hide");
$(this).siblings("i").toggleClass("hide");
})
}
var clickTitle = function(){
var $itemHasChild = $("#toc .toc-item:has(> .toc-child)");
var $titleHasChild = $itemHasChild.children(".toc-link");
$titleHasChild.dblclick(function(){//双击隐藏子目录
$(this).siblings(".toc-child").hide(100);
$(this).siblings("i").toggleClass("hide");
})
// After dblclick enent
$titleHasChild.click(function(){
var $curentTocChild = $(this).siblings(".toc-child");
if ($curentTocChild.is(":hidden")) {
$curentTocChild.show(100);
$(this).siblings("i").toggleClass("hide");
}
})
}
var clickTocTitle = function(){
var $itemHasChild = $("#toc .toc-item:has(> .toc-child)");
var $titleHasChild = $itemHasChild.children(".toc-link");
var $iconToExpand = $(".toc-item > .fa-caret-right");
var $iconToFold = $(".toc-item > .fa-caret-down");
var $subToc = $titleHasChild.next(".toc-child");
$iconToExpand.addClass("hide");
var $tocTitle = $("#toc .toc-title");
if ($titleHasChild.length) {
$tocTitle.addClass("clickable");
$tocTitle.click(function(){
if ($subToc.is(":hidden")) {
$subToc.show(150);
$iconToExpand.removeClass("hide");
$iconToFold.addClass("hide");
} else {
$subToc.hide(100);
$iconToExpand.addClass("hide");
$iconToFold.removeClass("hide");
}
})
// TOC on mobile
if ($(".left-col").is(":hidden")) {
$("#container .toc-article .toc").css("padding-left", "1.4em");
$("#container .toc-article .toc-title").css("display", "initial");
}
}
}
var TocNoWarp = function(cond){
if (cond) {
var $tocLink = $(".toc li a");
$tocLink.each(function(){
var title = $(this).find('.toc-text').text();
// Find elements with ellipsis
if (this.offsetWidth < this.scrollWidth) {
$(this).attr("title", title);
if (!!$().tooltip) { $(this).tooltip() }
}
        //$(this).attr("href", "#" + title.toLowerCase());
        //$(this).attr("onclick", alert("text"));
})
var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
if (isSafari) {
$("#toc .toc-item i").css("bottom", ".1em");
}
}
}
// 异步加载css
function loadCss (cssUrl, callback) {
var elem, bl,
isExecuted = false; // 防止在ie9中，callback执行两次
if ( cssUrl == null ) {
return String(cssUrl);
}
elem = document.createElement('link'),
elem.rel = 'stylesheet';
if ( typeof callback === 'function' )  {
bl = true;
}
// for ie
function handle() {
if ( elem.readyState === 'loaded' || elem.readyState === 'complete' ) {
if (bl && !isExecuted) {
callback();
isExecuted = true;
}
elem.onreadystatechange = null;
}
}
elem.onreadystatechange = handle;
// for 非ie
if (bl && !isExecuted) {
elem.onload = callback;
isExecuted = true;
}
elem.href = cssUrl;
document.getElementsByTagName('head')[0].appendChild(elem);
}
//异步加载js
function loadScript(scriptUrl, callback) {
var elem, bl,
isExecuted = false; // 防止在ie9中，callback执行两次
if (scriptUrl == null) {
return String(fn);
}
elem = document.createElement('script');
if ( typeof callback === 'function' )  {
bl = true;
}
// for ie
function handle(){
var status = elem.readyState;
if (status === 'loaded' || status === 'complete') {
if (bl && !isExecuted) {
callback();
isExecuted = true;
}
elem.onreadystatechange = null;
}
}
elem.onreadystatechange = handle;
// for 非ie
if (bl && !isExecuted) {
elem.onload = callback;
isExecuted = true;
}
elem.src = scriptUrl;
document.getElementsByTagName('head')[0].appendChild(elem);
}
//instantclick回调
var afterChange = function (isChange) {
var isPostPage = null;
if(isPostPage == null){
isPostPage = is_post();
}
if(isPostPage && !isChange){//如果是文章，则设置目录功能
$("#instantclick").remove();
$("#instantclick-bar").remove();
yiliaConfig.toc = ["隐藏目录", "显示目录", !!"false"];
toggleTocArea();
HideTOCifNoHeader();
var $itemHasChild = $("#toc .toc-item:has(> .toc-child)");
var $titleHasChild = $itemHasChild.children(".toc-link");
$itemHasChild.prepend("<i class='fa fa-caret-down'></i><i class='fa fa-caret-right'></i>");
clickIcon();
clickTitle();
clickTocTitle();
TocNoWarp(yiliaConfig.toc[2]);
$(".article").css("opacity", "1.0");//结束后要将文章显示
} else if(is_home() && !isChange){
loadCss("//cdn.bootcss.com/semantic-ui/0.19.3/css/semantic.min.css", function(){
jQuery.getScript("//cdn.bootcss.com/semantic-ui/0.19.3/javascript/semantic.min.js").done(function(){
$(".article").removeClass("animated");
$(".article").css("opacity", "1.0");//结束后要将文章显示
});
});
} else {//暂时解决在分类标签页打开其它页面后，返回分类标签页加载页面出错的问题
var url = window.location.pathname;
if(!isChange){
if(url == "/tags/"){
window.location.reload();
return;
} else if(url.startWith("/page/")){
$(".article").css("opacity", "1.0");//结束后要将文章显示
}
}
}
if(is_archive()){
$("#id_archives").css("opacity", "1.0");
}
$(document).ready(function () {
resetPageOpacity();
hideLabels();
resetTags();
$("img.lazy").lazyload({
placeholder : "/img/loading0_2.gif",
effect : "fadeIn"
});
var avatarIcons = ["/img/avatar.jpg", "/img/Coding.png"];
var iconIndex = Math.floor(Math.random()*(avatarIcons.length));
var avatarPath = avatarIcons[iconIndex];
//本机宽度798、高度638
resetTitile();
addAvatar(avatarPath);
resetPageWidth();
setTitleSerialNum();
tipBoxFunc();
otherSettings(isChange);
baiduShare();
if(isPostPage){
setHightLigth();
copyCode();
copyRight();
}
leftSearch();
mobileSearch();
rightSearch();
// $.cachedScript('https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js').done(function () {
//   console.log("dddddddd");
// });
// includeJavaScript("https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js");

if(isPostPage) {
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
$.cachedScript('//zz.bdstatic.com/linksubmit/push.js').done(function () {
});
} else {
$.cachedScript('//push.zhanzhang.baidu.com/push.js').done(function () {
});	
}

}
// 隐藏：
// addTextAnimation();
// playTextAnimation();
// textAnimationClick(avatarPath);
codeRain();
// duoshuoComments();
});
}
//左侧搜索
var leftSearch = function() {
if (yiliaConfig.search) {
jQuery.getScript(yiliaConfig.rootUrl + 'js/search.js').done(function(){
var inputArea = document.querySelector("#local-search-input");
var $HideWhenSearch = $("#toc, #tocButton, .post-list, #post-nav-button a:nth-child(2)");
var $resetButton = $("#search-form .button");
var $resultArea = $("#local-search-result");
var getSearchFile = function() {
var search_path = "search.xml";
var path = yiliaConfig.rootUrl + search_path;
searchFunc(path, 'local-search-input', 'local-search-result');
}
var getFileOnload = inputArea.getAttribute('searchonload');
if (yiliaConfig.search && getFileOnload === "true") {
getSearchFile();
} else {
inputArea.onfocus = function() {
getSearchFile()
}
}
var HideTocArea = function() {
$HideWhenSearch.css("visibility", "hidden");
$resetButton.show();
}
inputArea.oninput = function() {
HideTocArea()
}
inputArea.onkeydown = function() {
if (event.keyCode == 13) return false
}
//搜索框删除按钮
resetSearch = function() {
$HideWhenSearch.css("visibility", "initial");
$resultArea.html("");
document.querySelector("#search-form").reset();
$resetButton.hide();
$(".no-result").hide();
$("#left_col_div").css("overflow-y", "hidden");
}
//监控搜索框内容，内容为空时主动调用删除函数
$(function() {
$('#local-search-input').bind('input propertychange', function() {
$('#result').html($(this).val().length + ' characters');
var len = $(this).val().length;
if (len <= 0) {
var searchDel = document.getElementById("search-delete");
searchDel.click();
}
});
})
$resultArea.bind("DOMNodeRemoved DOMNodeInserted", function(e) {
if (!$(e.target).text()) {
$(".no-result").show(200);
$("#left_col_div").css("overflow-y", "hidden");
} else {
$(".no-result").hide();
$("#left_col_div").css("overflow-y", "auto").css("overflow-x", "hidden");
}
})
});
}
}
//弹出鸟屋
var tipBoxFunc = function() {
var Tips = (function() {
var $tipBox = $(".tips-box");
return {
show: function() {
$tipBox.removeClass("hide");
},
hide: function() {
$tipBox.addClass("hide");
},
init: function() {
}
}
})();
var bind = function() {
var switchBtn = $("#myonoffswitch");
var tagcloud = $(".second-part");
var navDiv = $(".first-part");
switchBtn.click(function() {
if (switchBtn.hasClass("clicked")) {
switchBtn.removeClass("clicked");
tagcloud.removeClass("turn-left");
navDiv.removeClass("turn-left");
} else {
switchBtn.addClass("clicked");
tagcloud.addClass("turn-left");
navDiv.addClass("turn-left");
resetTags();
}
});
var timeout;
var isEnterBtn = false;
var isEnterTips = false;
$(".icon").bind("mouseenter", function() {
isEnterBtn = true;
Tips.show();
}).bind("mouseleave", function() {
isEnterBtn = false;
setTimeout(function() {
if (!isEnterTips) {
Tips.hide();
}
}, 100);
});
$(".tips-box").bind("mouseenter", function() {
isEnterTips = true;
Tips.show();
}).bind("mouseleave", function() {
isEnterTips = false;
setTimeout(function() {
if (!isEnterBtn) {
Tips.hide();
}
}, 100);
});
$(".tips-inner li").bind("click", function() { //控制鸟屋点击事件
var idx = $(this).index();
if(idx == 3){
if ($("#my_signature").length <= 0) {
$("#bee_div").append("<img id='my_signature' src='/img/bee.png' />");
}
} else if(idx == 4){
if($("#ds-recent-visitors").length <= 0){
$("#js-visitor").append("<ul class='ds-recent-visitors' data-num-items='28' data-avatar-size='50' id='ds-recent-visitors'></ul>");
DUOSHUO.RecentVisitors($("#ds-recent-visitors"));
}
}
slide(idx);
Tips.hide();
});
$(".QQ").bind("click", function() { //qq扫码
//var idx = $(this).index();
if ($("#my_qq").length <= 0) {
$("#qq_div").append("<img id='my_qq' src='/img/qq.png' style='cursor:pointer; margin-top:-8px;' />");
$("#my_qq").bind("click", function() { //qq扫码
if ($("#my_wechat").length <= 0) {
$("#wechat_div").append("<img id='my_wechat' src='/img/wechat.png' style='cursor:pointer; margin-left:12px;' />");
$("#my_wechat").bind("click", function() { //微信扫码
slide(5);
Tips.hide();
});
}
slide(6);
Tips.hide();
});
}
slide(5);
Tips.hide();
});
$(".WeChat").bind("click", function() { //微信扫码
//var idx = $(this).index();
if ($("#my_wechat").length <= 0) {
$("#wechat_div").append("<img id='my_wechat' src='/img/wechat.png' style='cursor:pointer; margin-left:12px;' />");
$("#my_wechat").bind("click", function() { //微信扫码
if ($("#my_qq").length <= 0) {
$("#qq_div").append("<img id='my_qq' src='/img/qq.png' style='cursor:pointer; margin-top:-8px;' />");
$("#my_qq").bind("click", function() { //qq扫码
slide(6);
Tips.hide();
});
}
slide(5);
Tips.hide();
});
}
slide(6);
Tips.hide();
});
}
bind();
Tips.init();
}
//设置标签的背景色
var resetTags = function(){
if(!navigator.userAgent.match(/(iPhone|iPod|Android|ios|Opera Mini|BlackBerry|webOS)/i)){
var tags = $(".tagcloud a");
for(var i = 0; i < tags.length; i++){
var num = Math.floor(Math.random()*7);
tags.eq(i).addClass("color" + num);
}
$(".article-category a:nth-child(-n+2)").attr("class", "color0");
}
}
var resetTitile = function () {
<!-- 控制标题是否滚动 -->
var totalwidth = $(window).width();
var titles = document.getElementsByClassName("archive-item-title");
for (var i = 0; i < titles.length; i++) {
var title = titles[i];
<!-- 设置标题最大显示长度 -->
if (totalwidth >= 1800) {
title.style.maxWidth = "600px";
} else if (totalwidth >= 1550 && totalwidth < 1800) {
title.style.maxWidth = "500px";
} else if (totalwidth < 700) {
title.style.maxWidth = "300px";
title.style.marginLeft = "-10px";
}
<!--　添加跑马灯效果 -->
var marquee = false;
var realLength = 0;
var str = title.innerText;
for (var j = 0; j < str.length; j++) {
charCode = str.charCodeAt(j);
if (charCode >= 0 && charCode <= 128) {
realLength += 1;
} else {
realLength += 2;
}
}
var max = 40;
if (totalwidth < 700) {
max = 34;
}
if (realLength > max) {
marquee = true;
}
if (marquee) {
var mar = document.createElement("marquee");
mar.setAttribute("behavior", "scroll");
mar.onmouseover = function () {
this.stop();
}
mar.onmouseout = function () {
this.start();
}
var parent = title.parentNode;
var _title = title.cloneNode(true);
mar.appendChild(_title);
parent.replaceChild(mar, title);
}
}
//设置页面标题
var str = document.title;
if (str.indexOf("移动开发") != 0) {
arr = str.split("|");
document.title = arr[0] + "|" + arr[2];
}
}
var addAvatar = function (avatarPath) {

var isExist = $("#id_avatar_a .js-avatar")
if (!isExist.length) {
$("#id_avatar_a").append("<img src='/img/avatar.jpg' class='js-avatar' style='width: 100%;height: 100%;opacity: 1;' />");
}

}
var resetPageWidth = function () {
//宽屏时设置页面宽度
var totalwidth = $(window).width();
if (totalwidth >= 1800) {
$(".body-wrap").css("max-width", "85em");
$(".body-wrap").css("width", "85em");
} else if (totalwidth >= 1500 && totalwidth < 1800) {
$(".body-wrap").css("max-width", "70em");
$(".body-wrap").css("width", "70em");
} else if (totalwidth <= 700) {
<!-- 设置移动端页面样式 -->
if (is_post() || is_archive() || is_category() || is_tag()) {
$(".article").each(function () {
$(this).css("margin-top", "0.625rem").css("margin-left", "-0.35rem").css("margin-right", "0.3rem").css("margin-bottom", "0.625rem");
})
} else {
$(".article").each(function () {
$(this).css("margin-top", "0.625rem").css("margin-left", "0.35rem").css("margin-right", "0.3rem").css("margin-bottom", "0.625rem");
})
}
//在小屏时距边界左边有点大了，所以距离减小
var curUrl = window.location.pathname;
var tagUrl = "/tags/"
var guestUrl = "/guestbook/";
var aboutUrl = "/about/";
var socialUrl = "/social/"
if(curUrl == tagUrl || curUrl == guestUrl || curUrl == aboutUrl || curUrl == socialUrl){
$(".article").each(function () {
$(this).css("margin-top", "0.625rem").css("margin-left", "-0.35rem").css("margin-right", "0.3rem").css("margin-bottom", "0.625rem");
})
}
//设置标题大小
$(".article-title-big").each(function () {
$(this).css("margin-left", "5px").css("font-size", "1.5rem");
})
$(".article-info-post").each(function () {
$(this).css("margin-left", "5px");
})
}
}
//给标题加上序号
var setTitleSerialNum = function () {
if(is_post()){
var existNumber = null;
$("h2").each(function(){
if($(this).attr("exist-number") != undefined) {
existNumber = true;
return false;
}
$(this).css("padding-top", "0.6em");
$(this).css("margin-top", "1em");
$(this).css("padding-bottom", "0.3em");
$(this).css("border-top", "1px solid #ddd");
var attr = $(this).attr("exist-number");
if(null == attr || undefined == attr){
$(this).attr("exist-number", true);
}
});
//已经设置过序号，将直接返回
if(existNumber){
return;
}
$("h3").each(function(){//控制h3标题的间隔
$(this).css("margin-top", "0.3em");
$(this).css("margin-bottom", "0.2em");
});
$("h4").each(function(){//控制h4标题的间隔
$(this).css("margin-top", "0.15em");
$(this).css("margin-bottom", "0.15em");
});
doSetNumber()
function doSetNumber() {
// 因为前面逻辑耦合太严重了，所以从这里开始抽出来代码。
// 但是没有办法为每页定制，所以只好全部都统一设置标题排序。
var $article = $(".article-entry");
var count = [0, 0, 0, 0, 0, 0];
var mark = [0, 0, 0, 0, 0, 0];
(function setMark() {
var hTag = ["h1", "h2", "h3", "h4", "h5", "h6"];
var index = 0;
for (var i = 0; i < 6; ++i) {
if ($article.children(hTag[i]).length > 0) {
++index;
mark[i] = index;
}
}
})();
$article.children(":header").each(function () {
var t = $(this);
var pos = 0;
switch (t[0].tagName) {
case "H1":
pos = 0;
break;
case "H2":
pos = 1;
break;
case "H3":
pos = 2;
break;
case "H4":
pos = 3;
break;
case "H5":
pos = 4;
break;
case "H6":
pos = 5;
break;
}
var len = mark[pos];
if (len < 6) {
count[len] = 0;
}
count[len - 1]++;

if (len == 1) {
} else {
  var listStr = "";
  for (var i = 1; i < len; ++i) {
    if (i === 1) { // 总体思想是从h3开始弄序号，所以前面的既不要序号，也不要点后缀
      listStr += "" + count[i];
    } else {
      listStr += "." + count[i];
    }
  }
  listStr += "➢ ";
  t.html(listStr + t.html());
}
});
}
} else {
//if (!navigator.userAgent.match(/(iPhone|iPod|Android|ios|Opera Mini|BlackBerry|webOS)/i)) {
//  var heartspan = "<span class='htmleaf-links'><i class='heart' id='like3' rel='like'></i></span>";
//  $("#footerdiv").append(heartspan);
//底部红心动画
//  $('body').on("click", '.heart', function () {
//    var A = $(this).attr("id");
//    var B = A.split("like");
//    var messageID = B[1];
//    var C = parseInt($("#likeCount" + messageID).html());
//    $(this).css("background-position", "")
//    var D = $(this).attr("rel");
//    if (D === 'like') {
//      $("#likeCount" + messageID).html(C + 1);
//      $(this).addClass("heartAnimation").attr("rel", "unlike");
//    }
//    else {
//      $("#likeCount" + messageID).html(C - 1);
//      $(this).removeClass("heartAnimation").attr("rel", "like");
//      $(this).css("background-position", "left");
//    }
//  });
//}
}
}
//代码高亮
var setHightLigth = function () {
<!-- prettify代码高亮脚本引入 http://jumpbyte.cn/2016/07/02/use-and-install-prettify/-->
if (is_post()){
jQuery.getScript("//cdn.bootcss.com/prettify/r298/prettify.min.js")
.done(function() {
/* 执行成功后的处理 */
$('pre').addClass('prettyprint linenums').attr('style', 'white-space:pre;word-break: keep-all;overflow:auto;height:auto;width:auto;padding-top:5px;padding-bottom:5px;margin-bottom:10px;');
<!-- 控制代码高度和滚动条 -->
prettyPrint();
})
.fail(function() {
/* 执行失败后的处理 */
});
}
}
var otherSettings = function (isChange) {
var totalwidth = $(window).width();
if (!navigator.userAgent.match(/(iPhone|iPod|Android|ios|Opera Mini|BlackBerry|webOS)/i)) {
//flying
if (totalwidth <= 900) {
$(".body-wrap").css("margin-bottom", "116px");
}
// if($("#id_keep_div").length <= 0){
// var flyingDiv = "<div id='id_keep_div' style='display:inline;'><span class='my-face' style='vertical-align:middle;'>日拱一卒</span>";
// $(flyingDiv).insertBefore("#web_count_div");
// }
//添加左边栏ngudream效果
$("#ngudream_name").attr("class", "header-author cl-effect-2");
//移动端就不需要加载这几个图片了
//$("#qq_div").append("<img id='my_qq' src='/img/qq.png' style='cursor:pointer; margin-top:-8px;' />");
//$("#wechat_div").append("<img id='my_wechat' src='/img/wechat.png' style='cursor:pointer; margin-left:12px;' />");
//$("#bee_div").append("<img src='/img/bee.png' />");
//不显示右下角的搜索按钮
//$("#cb-close-btn").css("opacity", 0);
//$("#cb-search-btn").css("opacity", 0);
//点击弹出心形
if(isChange){
// var loveClick = function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)try{d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");}catch(e){}requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()};
// loveClick(window, document);
$.cachedScript('/js/love.js').done(function () {
});
}
var curUrl = window.location.pathname;
var tagUrl = "/tags/"
var guestUrl = "/guestbook/";
var aboutUrl = "/about/";
var archiveUrl = "/archives/";
var welfareUrl = "/404.html";
if(curUrl == tagUrl || curUrl == guestUrl || curUrl == aboutUrl || curUrl == archiveUrl || curUrl == welfareUrl){
try {
$(".tips-inner").find("li")[4].remove();
} catch (e) {
}
}
if(is_category() || is_tag()) {
try {
$(".tips-inner").find("li")[4].remove();
} catch (e) {
}
}
// console.log("screen.height = " + screen.height + ", screen.width = " + screen.width);
} else {
if (is_post()) {
<!-- 移动端不显示提示 -->
$("#copyright_author").attr("class", "");
$("#copyright_url").attr("class", "");
$("#copyright_license").attr("class", "");
}
$("#id_wordcount_span").css("margin-left", "");
$(".body-wrap").css("margin-bottom", "110px");//移动端页面底部距离大一点
// if (totalwidth > 900) {//已合并到special.css
//   $("<link>")
//         .attr({
//           rel: "stylesheet",
//           type: "text/css",
//           href: "/plugins/hint/hint.min.css"
//         })
//         .appendTo("head");
//   $("<link>")
//         .attr({
//             rel: "stylesheet",
//             type: "text/css",
//             href: "/plugins/font/style3.css"
//         })
//         .appendTo("head");
//   $("<link>")
//         .attr({
//             rel: "stylesheet",
//             type: "text/css",
//             href: "/plugins/heart/style.css"
//         })
//         .appendTo("head");
//   }
//左边栏缩小
if (totalwidth > 900 && totalwidth < 1200) {
$(".left-col").css("width", "250px");
$(".left-col").css("overflow-x", "hidden");
$(".mid-col").css("margin-left", "-50px");
if (is_post()) {
$("#toc").css("width", "180px");
$("#tocButton").css("margin-left", "-50px");
$("#post-nav-button").css("margin-left", "-50px");
}
}
//监听横竖屏转
window.addEventListener('orientationchange', function (event) {
if (window.orientation == 180 || window.orientation == 0) {
window.location.reload();//横屏
//$("#cb-search-div").removeAttr("style");
//$("#cb-search-div").css("float", "left").css("margin-left", "15px");
} else {
window.location.reload();//竖屏
}
});
$("#cb-search-content").removeAttr("style");
$("#cb-search-content").css("width", "70%").css("font-size", "1.2em").css("height", "30px")
.css("margin-top", "80px").css("border-radius", "50px");
$("#cb-close-div").css("margin-top", "50px")
//移动端显示公益为腾讯404
$("#publicwelfare").attr("href", "/publicwelfare/baby-back-home.html");
}
}
var copyCode = function () {
<!-- 代码的复制功能 -->
var totalwidth = $(window).width();
var clipboard = new Clipboard('.copyspan');
var nodes = document.getElementsByTagName("pre");
for (var i = 0; i < nodes.length; i++) {
var code = nodes[i];
if($(code).find(".copyspan").length <= 0){
code.onmouseover = function () {//鼠标进入时再显示复制按钮
$(this).find(".copyspan").show();
}
code.onmouseout = function () {
$(this).find(".copyspan").hide();
}
<!-- 添加复制按钮 -->
var span = document.createElement("span");
span.className = "copyspan";
span.style.width = "100%";
span.style.textAlign = "right";
var copy = document.createElement("i");
copy.style.cursor = "pointer";
<!--  设置鼠标手形 -->
copy.style.float = "right";
copy.style.marginRight = "10px"
copy.className = "fa fa-clipboard";
copy.setAttribute("title", "●'◡'●点我复制");
span.setAttribute("data-clipboard-text", code.innerText);
<!-- 复制的内容为code块 -->
span.appendChild(copy);
var height = code.offsetHeight;
if (totalwidth > 700) {
if (height > 100) {
copy.style.marginTop = "5px"
code.insertBefore(span, code.firstChild);
}
} else {
if (height > 100) {
//code.insertAfter(span, code.firstChild);
insertAfter(span, code.firstChild);
}
}
$(span).hide();
}
}
<!-- 在节点targetEl后面播入一个新元素newEl -->
function insertAfter(newEl, targetEl) {
var parentEl = targetEl.parentNode;
if (parentEl.lastChild == targetEl) {
parentEl.appendChild(newEl);
} else {
parentEl.insertBefore(newEl, targetEl.nextSibling);
}
}
}
var copyRight = function () {
var pageRightCopy = new Clipboard('.copy-path');
if (false && is_post()) {
//复制网页内容自动添加版权信息
var copyright = document.getElementsByClassName("copyright");
if (copyright.length > 0) {
function addCopyRight() {
var clipboard = new Clipboard('.copycontent');
var body_element = document.body;
var selection = window.getSelection();
if (window.clipboardData) { // Internet Explorer
var pagelink = "\r\n\r\n 原文出自「Alex Zhong @ az22c」转载请保留原文链接: " + document.location.href + "";
var copytext = selection + pagelink;
window.clipboardData.setData("Text", copytext);
return false;
} else {
var pagelink = "\r\n 原文出自「Alex Zhong @ az22c」转载请保留原文链接: " + document.location.href + "";
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.className = "copycontent";
newdiv.setAttribute("data-clipboard-text", copytext);
body_element.appendChild(newdiv);
newdiv.click();
//selection.selectAllChildren(newdiv);
window.setTimeout(function () {
body_element.removeChild(newdiv);
}, 0);
}
clipboard.destroy();
}
document.oncopy = addCopyRight;
}
}
}
var baiduShare = function () {
//处理百度分享
var elem = document.getElementsByClassName("bdsharebuttonbox");
if (elem.length > 0) {
var elemDiv = elem[0];
var elem_child = elemDiv.childNodes;//得到参数元素的所有子元素
for (var i = 0; i < elem_child.length; i++) { //遍历子元素
var childA = elem_child[i];
if (childA.className == "fa fa-share-alt bds_more") {
childA.parentNode.removeChild(childA);//删除更多
continue;
}
if (childA.className != undefined) {
var span = document.createElement("span");
var _sel = childA.cloneNode(true);
_sel.title = "";
span.appendChild(_sel);
span.setAttribute("class", "hint  hint--top");
span.setAttribute("data-hint", childA.title);
childA.parentNode.replaceChild(span, childA);
}
}
}
}
var rightSearch = function () {
//右下角搜索
var time1 = 0;
var show = false;
var names = new Array(); //文章名字等
var urls = new Array(); //文章地址
$(document).keyup(function (e) {
var time2 = new Date().getTime();
if (e.keyCode == 17) {
var gap = time2 - time1;
time1 = time2;
if (gap < 500) {
if (show) {
$(".cb-search-tool").css("display", "none");
show = false;
} else {
$(".cb-search-tool").css("display", "block");
show = true;
$("#cb-search-content").val("");
$("#cb-search-content").focus();
}
time1 = 0;
}
} else if(e.keyCode == 27){
$(".cb-search-tool").css("display", "none");
show = false;
time1 = 0;
}
});
$("#cb-search-content").keyup(function (e) {
var time2 = new Date().getTime();
if (e.keyCode == 17) {
var gap = time2 - time1;
time1 = time2;
if (gap < 500) {
if (show) {
$(".cb-search-tool").css("display", "none");
show = false;
} else {
$(".cb-search-tool").css("display", "block");
show = true;
$("#cb-search-content").val("");
$("#cb-search-content").focus();
}
time1 = 0;
}
}
});
$("#cb-close-btn").click(function () {
$(".cb-search-tool").css("display", "none");
show = false;
time1 = 0;
});
$("#cb-search-btn").click(function(){
$(".cb-search-tool").css("display", "block");
show = true;
$("#cb-search-content").val("");
$("#cb-search-content").focus();
time1 = 0;
});
$.getJSON("/search/cb-search.json").done(function (data) {
if (data.code == 0) {
for (var index in data.data) {
var item = data.data[index];
names.push(item.title);
urls.push(item.url);
}
$("#dropdown-menu").css("font-size", "1.2em");
$("#cb-search-content").typeahead({
source: names,
afterSelect: function (item) {
$(".cb-search-tool").css("display", "none");
show = false;
window.location.href = (urls[names.indexOf(item)]);
return item;
}
});
}
}).error(function(data, b) { console.log("json解析错误，搜索功能暂不可用，请检查文章title，确保不含有换行等特殊符号"); });
}
//移动端添加搜索图标
var mobileSearch = function(){
if(navigator.userAgent.match(/(iPhone|iPod|Android|ios|Opera Mini|BlackBerry|webOS)/i)){
$("#id_span_search_close").append("<img src='/search/img/cb-close.png' id='cb-close-btn'/>");
$("#id_span_search_open").append("<img src='/search/img/cb-search.png' id='cb-search-btn'/>");
}
}
//左边栏coding change动画
var addTextAnimation = function (){
var textAnimations = [
"rw-words rw-words-1", "cd-headline rotate-1", "cd-headline clip", "cd-headline slide",
"cd-headline zoom", "cd-headline letters scale", "cd-headline push", "cd-headline loading-bar"
],
textLen = textAnimations.length,
textIndex = Math.ceil(Math.random() * textLen) - 1,
textAnimationName = textAnimations[textIndex];
if(textIndex != 0){
// $("#id_span_change").remove();
$("#id_normal_text_anim").remove();
var textAnimView = "<div id='id_span_change'><span>Coding Changes the</span><span class='cd-words-wrapper' style='margin-left:4px;'><b class='is-visible' style='font-weight:normal !important;color: #6b889d;'>World</b><b style='font-weight:normal !important;color: #6b739d;'>Never</b><b style='font-weight:normal !important;color: #7a6b9d;'>Give</b><b style='font-weight:normal !important;color: #7a6b9d;'>Up</b><b style='font-weight:normal !important;color: #7a6b9d;'>Dream</b></span></div>";
$("#id_hgroup_name").after(textAnimView);
var newClass = textAnimationName + " header-subtitle";
// $("#id_span_change").attr("class", newClass);
}
}
var playTextAnimation = function () {
//set animation timing
var animationDelay = 2500,
//loading bar effect
barAnimationDelay = 3800,
barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
//letters effect
lettersDelay = 50,
//type effect
typeLettersDelay = 150,
selectionDuration = 500,
typeAnimationDelay = selectionDuration + 800,
//clip effect
revealDuration = 600,
revealAnimationDelay = 1500;
initHeadline();
function initHeadline() {
//insert <i> element for each letter of a changing word
singleLetters($('.cd-headline.letters').find('b'));
//initialise headline animation
animateHeadline($('.cd-headline'));
}
function singleLetters($words) {
$words.each(function(){
var word = $(this),
letters = word.text().split(''),
selected = word.hasClass('is-visible');
for (i in letters) {
if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
}
var newLetters = letters.join('');
word.html(newLetters);
});
}
function animateHeadline($headlines) {
var duration = animationDelay;
$headlines.each(function(){
var headline = $(this);
if(headline.hasClass('loading-bar')) {
duration = barAnimationDelay;
setTimeout(function(){ headline.find('.cd-words-wrapper').addClass('is-loading') }, barWaiting);
} else if (headline.hasClass('clip')){
var spanWrapper = headline.find('.cd-words-wrapper'),
newWidth = spanWrapper.width() + 10
spanWrapper.css('width', newWidth);
} else if (!headline.hasClass('type') ) {
//assign to .cd-words-wrapper the width of its longest word
var words = headline.find('.cd-words-wrapper b'),
width = 0;
words.each(function(){
var wordWidth = $(this).width();
if (wordWidth > width) width = wordWidth;
});
headline.find('.cd-words-wrapper').css('width', width);
};
//trigger animation
setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
});
}
function hideWord($word) {
var nextWord = takeNext($word);
if($word.parents('.cd-headline').hasClass('type')) {
var parentSpan = $word.parent('.cd-words-wrapper');
parentSpan.addClass('selected').removeClass('waiting');
setTimeout(function(){
parentSpan.removeClass('selected');
$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
}, selectionDuration);
setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);
} else if($word.parents('.cd-headline').hasClass('letters')) {
var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);
}  else if($word.parents('.cd-headline').hasClass('clip')) {
$word.parents('.cd-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
switchWord($word, nextWord);
showWord(nextWord);
});
} else if ($word.parents('.cd-headline').hasClass('loading-bar')){
$word.parents('.cd-words-wrapper').removeClass('is-loading');
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
setTimeout(function(){ $word.parents('.cd-words-wrapper').addClass('is-loading') }, barWaiting);
} else {
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, animationDelay);
}
}
function showWord($word, $duration) {
if($word.parents('.cd-headline').hasClass('type')) {
showLetter($word.find('i').eq(0), $word, false, $duration);
$word.addClass('is-visible').removeClass('is-hidden');
}  else if($word.parents('.cd-headline').hasClass('clip')) {
$word.parents('.cd-words-wrapper').animate({ 'width' : $word.width() + 10 }, revealDuration, function(){
setTimeout(function(){ hideWord($word) }, revealAnimationDelay);
});
}
}
function hideLetter($letter, $word, $bool, $duration) {
$letter.removeClass('in').addClass('out');
if(!$letter.is(':last-child')) {
setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);
} else if($bool) {
setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
}
if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
var nextWord = takeNext($word);
switchWord($word, nextWord);
}
}
function showLetter($letter, $word, $bool, $duration) {
$letter.addClass('in').removeClass('out');
if(!$letter.is(':last-child')) {
setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration);
} else {
if($word.parents('.cd-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.cd-words-wrapper').addClass('waiting'); }, 200);}
if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
}
}
function takeNext($word) {
return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}
function takePrev($word) {
return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
}
function switchWord($oldWord, $newWord) {
$oldWord.removeClass('is-visible').addClass('is-hidden');
$newWord.removeClass('is-hidden').addClass('is-visible');
}
}
var textAnimationClick = function (avatarPath) {
var totalHeight = screen.height;
if (!is_post()) {
if(totalHeight >= 700){//左边栏足够高才显示图片
if($("#left_show_div").length <= 0){
var curDate = new Date();
var date = curDate.getDate();
var time = Date.parse(new Date());
var lastTime = Date.parse("2017-02-01");
var day = parseInt((time -lastTime)/(1000*60*60*24));
var path = '/img/daily_pic/38.png';
var avatarIndex = Math.ceil(Math.random()*30);
var newAvatar = '/img/avatar/' + avatarIndex + '.png';
//console.log(path);
var year_div = "<div align=center id='left_show_div' ><img src=" + path + " id='2017_year' style='cursor:pointer;'/></div>";
$("#left_col_div").append(year_div);
if(totalHeight >= 1000){
$("#left_col_div").css("overflow-y", "auto").css("overflow-x", "hidden");
} else if(totalHeight >= 700){
$("#left_col_div").css("overflow-y", "hidden").css("overflow-x", "hidden");
var clickCount = 0;
// $("#id_span_change").css("cursor", "pointer").click(function(){
// if((clickCount % 2) == 0){
// $("#left_col_div").css("overflow-y", "auto").css("overflow-x", "hidden");
// } else {
// $("#left_col_div").css("overflow-y", "hidden").css("overflow-x", "hidden");
// }
// clickCount++;
// });
var avatarOut = false;
$("#id_avatar_a").mouseenter(function(){
if(!avatarOut){
avatarOut = true;
$("#blog_avatar").attr("src", newAvatar).attr("class", "animated rotateInDownLeft").css("background", "#fafafa").css("border-radius","50px");
}
});
$("#id_avatar_a").mouseleave(function(){
if(avatarOut){
avatarOut = false;
$("#blog_avatar").attr("src", avatarPath).attr("class", "animated rotateInDownRight");
}
});
}
$("#2017_year").click(function() {
//$(this).remove();
$(this).css("opacity", 0);
$(this).parent().append("<img src='/img/daily_pic/38.png' style='position:absolute; margin-left:-270px;cursor:pointer;' id='eyes_img'/>");
$("#eyes_img").click(function() {
$(this).remove();
$("#2017_year").css("opacity", 1);
});
});
}
}
}
}
//代码雨
var curTimer = null;//记录上一页面的timer，使用instantclick后，打开下一页面时需要取消上一个定时器
var colorList = ["#6da336", "#ff945c", "#66CC66", "#99CC99", "#CC6666", "#76becc", "#c99979", "#918597", "#4d4d4d"];
var id = null;
var colorBGList = ["rgba(109,163,54,0.05)", "rgba(255,148,92, 0.05)", "rgba(102,204,102,0.05)", "rgba(153,204,153,0.05)", "rgba(204,102,102,0.05)", "rgba(118,190,204,0.05)", "rgba(201,153,121,0.05)", "rgba(145,133,151,0.05)", "rgba(77,77,77,0.05)"];
var colorLetterList = ["#ffffff", "#000000", "#000000", "#000080", "#000000", "#FFFF00", "#000000", "#0F0", "#0F0"];
var codeRain = function () {
// Random Color 边栏顶部随机颜色
// clearInterval(curTimer);
// $("#matrix").remove();
// $("#id_code_rain_div").append("<canvas id='matrix' width='300' height='180'></canvas>");
id = Math.ceil(Math.random()*(colorList.length-1));
// PC
$("#container .left-col .overlay").css({"background-color": colorList[id],"opacity": .5});
// Mobile
$("#container #mobile-nav .overlay").css({"background-color": colorList[id],"opacity": .7});
if(!navigator.userAgent.match(/(iPhone|iPod|Android|ios|Opera Mini|BlackBerry|webOS)/i)){
if(curTimer == null){
// 代码雨
if(matrix != undefined){
var width = matrix.width;
var height = matrix.height;
var letters = Array(256).join(1).split('');
var draw = function () {
if(typeof(matrix) == "undefined"){
clearInterval(curTimer);
return;
}
var ctx = matrix.getContext('2d')
ctx.globalAlpha = 1.0;
// 将稍透明的矩形放在上面：
ctx.fillStyle = colorBGList[id];
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = colorLetterList[id];
ctx.font = "10pt Calibri";
// "1" --> "110" --> "11010" --> 0
letters.map(function (y_pos, index) {
text = String.fromCharCode(48 + Math.floor(Math.random()*73));//英文字符：65 + Math.random() * 33 中文：3e4 + Math.random() * 33 数字：Math.floor(Math.random()*10)
x_pos = index * 10;
ctx.fillText(text, x_pos, y_pos);
letters[index] = (y_pos > 180 + Math.random() * 1e4) ? 0 : y_pos + 10;
});
};
}
var timer = setInterval(draw, 60);
curTimer = timer;
window.onfocus = function() {//获取焦点时开始
clearInterval(timer);
timer = setInterval(draw, 60);//定时器
}
window.onblur = function() {//失去焦点时停止，包括按F12的时候
clearInterval(timer);
}
}
}
}
//多说评论首页显示评论数
var duoshuoQuery = {short_name:"null"};
var duoshuoComments = function() {

}
//隐藏categories、tags页面下的标签
var hideLabels =  function() {
// Hide Labels
$("#id_archives").css("opacity", "1.0");
if(is_archive() || is_tag() || is_category()) {
var url = window.location.pathname;
if(!url.endWith("/tags/")){
$("#footer").after("<img id='id_eye_btn' class='hide-labels fa fa-eye animated infinite pulse' style='margin-left:5px;margin-top:5px;width:38px;height:18px;'></img>");
$("#id_eye_btn").attr("src", "/img/eye.png");
$(".hide-labels").click(function() {
$(".article-info").toggle(200);
})
}
}
}
var resetPageOpacity = function() {
var url = window.location.pathname;
if((url.startWith("/about/") && url.endWith("/about/")) || (url.startWith("/guestbook/") && url.endWith("/guestbook/"))){
$("#page-undefined").css("opacity", "1.0");
}
}
</script>
<!-- 添加 InstantClick 预加载 -->
<!-- 这段代码的含义是每次页面重载时，通过直接的函数调用来实现MathJax、百度统计、Google Code Prettify、Google Analytics的重新运行 -->
<script data-no-instant>
    if(!navigator.userAgent.match(/(iPhone|iPod|Android|ios|Opera Mini|BlackBerry|webOS)/i)){
      jQuery.getScript("//cdn.bootcss.com/instantclick/3.0.1/instantclick.min.js")
        .done(function() {
          InstantClick.on('change', function (isInitialLoad) {
//console.log(isInitialLoad);
            if (isInitialLoad === false) {
afterChange(isInitialLoad);
if (typeof MathJax !== 'undefined'){ // support MathJax
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
if (typeof prettyPrint !== 'undefined'){ // support google code prettify
prettyPrint();
}
if (typeof _hmt !== 'undefined'){  // support 百度统计
_hmt.push(['_trackPageview', location.pathname + location.search]);
}
if (typeof ga !== 'undefined'){  // support google analytics
ga('send', 'pageview', location.pathname + location.search);
}
            } else {
afterChange(isInitialLoad);
}
          });
          InstantClick.init();
        })
        .fail(function() {
        });
    } else {
afterChange(true);
    }
</script>
  </div>
</body>
</html>
